<template>
  <el-card>
    <template #header>
      <h3 v-text="t('Other channels')"></h3>
    </template>
    
    <el-row :gutter="16">
      <el-col :span="12">
        <el-input
          v-model="otherChannelsStore.samplesText"
          type="textarea"
          :rows="6"
          :resize="'vertical'"
          spellcheck="false"
        />
        <div style="text-align: center;">{{ t('Samples') }}</div>
      </el-col>
      <el-col :span="12">
        <el-input
          v-model="otherChannelsStore.generalRawDataText"
          type="textarea"
          :rows="6"
          :resize="'vertical'"
          spellcheck="false"
        />
        <div style="text-align: center;">{{ t('General raw data') }}</div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { onMounted } from 'vue'
import { useOtherChannelsStore } from '@/stores/otherChannels'
import { useLanguageStore } from '@/stores/language'

const otherChannelsStore = useOtherChannelsStore()
const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'Other channels': {
      'en': 'Other channels',
      'zh': '其他通道'
    },
    'Samples': {
      'en': 'Samples',
      'zh': '样本'
    },
    'General raw data': {
      'en': 'General raw data',
      'zh': '通用原始数据'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}

onMounted(() => {
  otherChannelsStore.initializeOtherChannels()
})
</script> 